<script setup lang="ts">
import { ref } from 'vue'
import { getDate } from '@/utils'

defineOptions({
  name: 'InsertDialog',
  desc: 'Add todo dialog',
})

const emit = defineEmits<{
  (e: 'on:submit', data: any): void
}>()

const dialogVisible = ref<boolean>(false)

const form = ref({
  title: '',
  description: '',
  stopAt: '',
})

const handleClose = () => {
  dialogVisible.value = false
  form.value = {
    title: '',
    description: '',
    stopAt: '',
  }
}

const submit = () => {
  emit('on:submit', form.value)
  handleClose()
}

defineExpose({
  open: () => {
    dialogVisible.value = true
    form.value.stopAt = getDate('YYYY-MM-DD')
  },
  close: () => {
    handleClose()
  },
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="新增待办"
    width="30%"
    @close="handleClose"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="待办事项名称">
        <el-input v-model="form.title" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="待办事项描述">
        <el-input v-model="form.description" placeholder="请输入描述" />
      </el-form-item>
      <el-form-item label="截止日期">
        <el-date-picker
          v-model="form.stopAt"
          style="width: 100%"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
